<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body,svg {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<svg viewBox="-400 -400 800 800">
  <rect x="100" y="100" width="100" height="100" fill="red">
    <!--
      type 指定transform类型
    -->
    <animateTransform
      id="rotate"
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0"
      to="360"
      dur="3s"
    ></animateTransform>
    <!--
      不像animate可以叠加
      两个 animateTransform
      后面的会覆盖前面的
    -->
    <animateTransform
      id="scale"
      attributeName="transform"
      attributeType="XML"
      type="scale"
      from="1"
      to="2"
      dur="3s"
      fill="freeze"
    ></animateTransform>


    <!--
      animate 无法利用transform做动画
    -->
    <!--<animate
      id="rotate"
      attributeName="transform"
      attributeType="XML"
      from="rotate(0) scale(1)"
      to="rotate(360) scale(2)"
      dur="3s"
    ></animate>-->
  </rect>
</svg>
</body>
</html>
